<template>
  <div v-if="loading" class="min-h-100 f-c-c">
    <Loading />
  </div>

  <div v-else-if="problem" class="h-full overflow-auto">
    <h3 class="text-24">{{ problem.title }}</h3>
    <div v-if="category" class="p-y-20 opacity-70">
      <div class="flex gap-20">
        <div>时间限制: {{ problem.timeLimit }}s</div>
        <div>类别: {{ category.name }}</div>
      </div>
      <div v-if="!!category.bestBefore">
        晚于 {{ formatDateTime(category.bestBefore) }} 后提交分数乘系数{{ category.scoreCoef }}%
      </div>
      <div v-if="!!category.deadline">截止日期：{{ formatDateTime(category.deadline) }}</div>
    </div>
    <div v-else class="p-y-20 opacity-70">
      <div class="flex gap-20">
        <div>作者: {{ problem.author }}</div>
        <div>时间限制: {{ problem.timeLimit }}s</div>
        <div>章节: {{ problem.chapterName }}</div>
      </div>
      <div v-if="!!problem.bestBefore">
        晚于 {{ formatDateTime(problem.bestBefore) }} 后提交分数乘系数{{ problem.scoreCoef }}%
      </div>
      <div v-if="!!problem.deadline">截止日期：{{ formatDateTime(problem.deadline) }}</div>
    </div>
    <div>
      <BarTitle>问题描述</BarTitle>
      <div class="m-b-24" v-html="problem.description"></div>
    </div>
    <div>
      <BarTitle>输入说明</BarTitle>
      <div class="m-b-24" v-html="problem.inputRequirement"></div>
    </div>
    <div>
      <BarTitle>输出说明</BarTitle>
      <div class="m-b-24" v-html="problem.outputRequirement"></div>
    </div>
    <div>
      <BarTitle>
        <div class="flex items-center">
          输入范例
          <CopyButton :text="problem.sampleInput" pop-msg="复制输入范例" placement="left" />
        </div>
      </BarTitle>
      <n-input
        class="m-b-24"
        style="font-family: 宋体"
        :value="problem.sampleInput"
        type="textarea"
        rows="10"
        placeholder=""
      />
    </div>
    <div>
      <BarTitle>
        <div class="flex items-center">
          输出范例
          <CopyButton :text="problem.sampleOuput" pop-msg="复制输出范例" placement="left" />
        </div>
      </BarTitle>
      <n-input
        class="m-b-24"
        style="font-family: 宋体"
        :value="problem.sampleOuput"
        type="textarea"
        rows="10"
        placeholder=""
      />
    </div>
  </div>
</template>

<script setup>
import api from '@/api/user'
import BarTitle from '@/components/common/BarTitle.vue'
import { formatDateTime } from '@/utils'
import Loading from '@/components/common/Loading.vue'
import CopyButton from '../common/CopyButton.vue'

const { examId, problemId } = inject('problem/idsValue', {})
const category = inject('problem/category')
const problem = inject('problem/problem')

const loading = ref(true)

// 请求题目详情
const getProblemDetail = async () => {
  try {
    loading.value = true
    const res = await api.getProblemByIdAndExamId({
      examId: examId,
      id: problemId,
    })
    problem.value = res.data
  } catch (err) {
    console.log(err)
  } finally {
    loading.value = false
  }
}

getProblemDetail()
</script>
